<!--  -->
<template>
  <div class="common-layout">
    <el-tabs :tab-position="tabPosition" @tab-click="handleClick" style="height: 200px" class="demo-tabs">
        <el-tab-pane label="User" name="1"></el-tab-pane>
        <el-tab-pane label="Config" name="2"></el-tab-pane>
        <el-tab-pane label="Role" name="3"></el-tab-pane>
        <el-tab-pane label="Task" name="4"></el-tab-pane>
        <div>1111</div>
    </el-tabs>
  </div>
</template>

<script>
import Messages from "../components/Messages/MAsideLeft.vue";
export default {
  name: "Messages",
  components: { Messages },
  props: {},
  data() {
    return {
      tabPosition : 'left',
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleClick(t){
      console.log(t.name);
    }
  },
  created() {},
  mounted() {},
};
</script>

<style scoped>
.common-layout {
  margin: 0px auto;
  width: 70%;
  background-color: rgb(126, 197, 209);
}
</style>
